<template>
  <div>
    <van-nav-bar title="意见反馈" left-text="返回" left-arrow @click-left="back" />

    <van-search v-model="value" show-action label="标题" placeholder="请输入搜索关键词" @search="onSearch">
      <template #action>
        <div @click="onSearch">搜索</div>
      </template>
    </van-search>

    <van-cell-group>
      <van-field v-model="title" label="反馈标题" placeholder="请输入反馈标题" />
    </van-cell-group>
    <van-field v-model="message" rows="1" autosize label="反馈内容" type="textarea" placeholder="请输入反馈内容" />
    <div style="margin: 16px;">
      <van-button round block type="info" native-type="submit" @click="onSubmit">新增意见反馈</van-button>
    </div>


    <div class="opinion" v-for="item in list" :key="item.id" @click="get(item)">
      <div class="opinion-title">反馈标题：{{ item.title }}</div>
      <div class="opinion-content">反馈内容：{{ item.content }}</div>
    </div>


  </div>
</template>

<script>
import { opinionsearch, opinionadd } from "./Service"
import mixin from "@/mixin/flag";
export default {
  mixins: [mixin],
  data() {
    return {
      value: "",
      message: '',
      title: '',
      list: [],
      activeNames: [],

    }
  },
  methods: {
    back() {
      this.$router.go(-1);
    },
    get(item) {
      this.$router.push(`/metro_query/opinion/detail/${item.id}`)
    },
    async onSearch() {
      let res = await opinionsearch({
        title: this.value
      })
      // console.log(res);
      this.list = res.data.rows;
      
    },
    async onSubmit() {
      let res = await opinionadd({
        title: this.title,
        content: this.message,
      })
      // console.log(res);
      if (res.data.code == 200) {
        this.$toast.success(res.data.msg);
      } else {
        this.$toast.fail(res.data.msg)
      }
       this.message= ''
       this.title=''
    }
  }
}
</script>

<style lang="scss" scoped>
h3 {
  margin-top: 50px;
  text-align: center;
}

.opinion {
  font-size: 16px;
  border-bottom: 1px solid #666;
  margin: 15px 20px 15px 10px;

  .opinion-title {
    margin-bottom: 10px;
  }

  .opinion-content {
    margin-bottom: 15px;
  }
}
</style>